<template>

  <div class="home" style="height: 100%">
    <el-container style="height: 100%;">
      <!-- 侧边栏 -->
      <el-aside :width="sideWidth + 'px'"  style="background-color: rgb(238, 241, 246); height: 100%;box-shadow: 2px 0 6px rgb(0 21 41 / 35%)">
        <Aside :is-collapse="isCollapse" :logo-text-show="logoTextShow"/>
      </el-aside>
      <el-container>
        <!-- 首部 -->
        <el-header style=" border-bottom: #d5d4d4 1px solid;">
          <Header :collapse-btn-class="collapseBtnClass" :collapse="collapse"/>
        </el-header>

        <breadcrumb/>
        <!-- 表格展示等主要功能 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import Aside from "@/components/Aside";
import Header from "@/components/Header";
import Breadcrumb from "@/components/Breadcrumb";

export default {
  name: 'Manage',
  components: {Header, Aside, Breadcrumb},
  comments:[
      Aside,
      Header,
      Breadcrumb
  ],
  data:function() {
    return {
      visible: false,
      isCollapse: false,
      collapseBtnClass: 'el-icon-s-fold',
      sideWidth:200,
      logoTextShow: true,
    }
  },
  methods:{
    collapse:function () {
        this.isCollapse = !this.isCollapse;
        this.logoTextShow = !this.logoTextShow
        if (this.isCollapse) {
          this.collapseBtnClass = 'el-icon-s-unfold'
          this.sideWidth = 64

        } else {
          this.collapseBtnClass = 'el-icon-s-fold'
          this.sideWidth = 200
        }
    },
  }
}
</script>

<style>

.el-header {
  line-height: 60px;
}
 /*加过渡给侧边导航*/
.el-aside {
  transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -moz-transition: width 0.25s;
  -webkit-transition: width 0.25s;
  -o-transition: width 0.25s;
}
/*加快侧边栏文字消失的速度*/
/*.el-menu {*/
/*  transition: all 10ms;*/
/*}*/
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

</style>
